<script>
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "Apply",
  data(){
    return {
      loanUse:"",
      loanAccount:100,
      loanDay:1,
    }
  },
  methods:{

    submit(){
      const formdata={
          loanUse:this.loanUse,
          loanAccount:this.loanAccount,
          loanDay:this.loanDay,
      }
      ElMessageBox.alert('是否确认申请贷款','申请确认',{
        showCancelButton:true,
        cancelButtonText:'取消',
        confirmButtonText:'确定申请'
      }).then(()=>{
        axios.post("http://localhost:8080/applyLoan",formdata,{
          headers: {
            "Authorization": localStorage.getItem("token")
          }

        }).then(()=>{
          ElMessage({
            type:"success",
            message:'已申请成功 请等待管理员审核'
          })
        })
      }).catch(()=>{
        ElMessage({
          message:'已取消',
        })
      })

    }
  }
}
</script>

<template>
  <div class="h-[calc(80%)] bg-red-400 ">
    <el-card style="width:100%;height: 100%;" body-style="background:gray">
      <template #header>贷款审批表</template>
      <el-input placeholder="贷款用途" v-model="loanUse" class="mb-5"></el-input>
      <el-input placeholder="贷款金额" v-model="loanAccount" type="number" class="mb-5"></el-input>
      <el-input placeholder="还款期限" v-model="loanDay" type="number"  class="mb-5"></el-input>
      <el-button @click="submit">确认贷款</el-button>
    </el-card>
  </div>
</template>

<style scoped>
.el-button {
  background: linear-gradient(to right, #007bff, #0056b3);
  color: white;
  border-radius: 4px;
}

.el-button:hover {
  background: linear-gradient(to right, #0069d9, #004085);
}

[class*="el-card__header"] {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.el-input__inner::-webkit-input-placeholder {
  color: #999;
  font-size: 14px;
}

.el-input__inner::-moz-placeholder {
  color: #999;
  font-size: 14px;
}

.el-input__inner:-ms-input-placeholder {
  color: #999;
  font-size: 14px;
}

.el-input__inner::placeholder {
  color: #999;
  font-size: 14px;
}

.el-input {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>